<template>
  <div>
    <!-- 搜索 -->
    <!-- 变量:searchInfo  事件:onSubmit  onReset -->
    <div class="search-box">
      <el-form :inline="true" :model="searchInfo">
        <el-form-item label="用户ID">
          <el-input style="width: 120px;" v-model="searchInfo.nickname" placeholder="昵称" />
        </el-form-item>
        <el-form-item label="名称">
          <el-input style="width: 120px;" v-model="searchInfo.province" placeholder="省份" size="default" />
        </el-form-item>
        <el-form-item>
          <el-button size="default" type="primary" :icon="Search" @click="onSubmit">查询</el-button>
          <el-button size="default" :icon="Refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 新增/删除 -->
    <!-- 事件:createRow deleteRows -->
    <div class="btn-list">
      <el-button :disabled="!selectedUsers || selectedUsers.length == 0" size="small" type="primary" :icon="Plus" @click="dialogVisible = true">打标签</el-button>
    </div>
    <!-- 显示数据表 -->
    <!-- 变量:UserInfos  事件:handleSelectionChange updateRow deleteRow -->
    <!-- height="250" 固定头  -->
    <!-- :fixed="index == 0" 固定首列 -->
    <!-- <el-table-column show-overflow-tooltip 单行显示,超出会提示 -->
    <!-- :default-sort="{ prop: 'subscribe', order: 'descending' }" 默认排序 -->
    <!-- align="left" 避免显示内容与标题行错位 -->
    <div class="table-box">
      <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        align="left"
        height="500"
        :data="useUser.users"
        row-key="openid"
        :default-sort="{ prop: 'subscribe', order: 'descending' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <template v-for="(item, index) in columns">
          <!-- tag 标签列以 tag显示 -->
          <el-table-column v-if="item.prop === 'tagid_list'" :fixed="index == 0" :align="item.align" width="120" :label="item.label" :prop="item.prop" show-overflow-tooltip>
            <template #default="scope">
              <el-tag type="info" size="small" effect="dark" v-for="(item, index) in scope.row.tagid_list" :key="index">{{ item.name }}</el-tag>
            </template>
          </el-table-column>
          <!-- 关注/取消 -->
          <el-table-column v-else-if="item.prop === 'subscribe'" :fixed="index == 0" :align="item.align" width="80" :label="item.label" :prop="item.prop" show-overflow-tooltip>
            <template #default="scope">
              <el-tag type="success" size="small" effect="dark" v-if="scope.row.subscribe === 1" :key="index">关注</el-tag>
              <el-tag type="danger" size="small" effect="dark" v-else>取消</el-tag>
            </template>
          </el-table-column>
          <!-- 其他 -->
          <el-table-column v-else :fixed="index == 0" :align="item.align" :label="item.label" :prop="item.prop" width="120" show-overflow-tooltip />
        </template>
      </el-table>

      <!-- 分页导航 -->
      <!-- 变量:pageInfo total  事件:currentPageChange  pageSizeChange -->
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pageInfo.page"
        :page-size="pageInfo.pageSize"
        :page-sizes="[10, 30, 50, 100]"
        :total="useUser.total"
        @current-change="currentPageChange"
        @size-change="pageSizeChange"
      />
    </div>
    <!-- 新增/变更 弹窗 -->
    <div class="updateForm">
      <el-dialog v-model="dialogVisible" :before-close="beforClose" draggable title="标签">
        <el-form label-position="right" label-width="80px">
          <el-form-item label="标签:">
            <el-select v-model="selectedTag" value-key="" placeholder="选择标签" clearable filterable>
              <el-option v-for="item in useTag.tags" :key="item.tag_id" :label="item.name" :value="item.tag_id" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button size="small" @click="onCancel">取 消</el-button>
            <el-button size="small" type="primary" @click="onConfirm">确 定</el-button>
          </div>
          <div align="left">
            <!-- 显示选择的用户, 有nickname的显示昵称, 无昵称显示 openid -->
            <el-tag :closable="false" v-for="item in selectedUsers">
              <div v-if="item.nickname">{{ item.nickname }}</div>
              <div v-else>{{ item.openid }}</div>
            </el-tag>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Search, Refresh, Plus } from '@element-plus/icons-vue'
import { IUserInfo, columns, putUserToTag } from './api'
import { ElMessageBox } from 'element-plus'
import { useTagStore, useUserStore } from './store'

// 搜索条件
const searchInfo = ref({} as IUserInfo) // 查询条件:以struct->json发给到后端
const onSubmit = () => {
  getData()
} // 查询
const onReset = () => {
  searchInfo.value = {} as IUserInfo
  getData()
} // 重置

// 数据表
const selectedUsers = ref<IUserInfo[]>()
const handleSelectionChange = (val: IUserInfo[]) => {
  selectedUsers.value = val
}

// 分页导航
const pageInfo = ref({ page: 1, pageSize: 10 }) // 分页信息:当前页号/每页行数;初始值  1/10
const currentPageChange = (vol: number) => {
  pageInfo.value.page = vol
  getData()
} // 当前页码变动
const pageSizeChange = (vol: number) => {
  pageInfo.value.pageSize = vol
  pageInfo.value.page = 1
  getData()
} // 每页行数变动

const useUser = useUserStore()
// 查询数据
const getData = async () => {
  await useUser.getUsers(pageInfo.value, searchInfo.value)
}
getData() // 页面加载时查询

const dialogVisible = ref(false) // 显示弹窗
const selectedTag = ref() // 选择的标签
// 标签所有
const useTag = useTagStore()
const getTags = () => {
  useTag.getAllTags()
}

const beforClose = () => {
  dialogVisible.value = false
}
const onCancel = () => {
  beforClose()
  selectedTag.value = ''
}

// 添加标签分组
const onConfirm = async () => {
  if (selectedTag.value === '') {
    ElMessageBox.alert('请选择一个标签')
    // beforClose()
    return
  }
  let ids: string[] = []
  selectedUsers.value?.forEach(user => {
    ids.push(user.openid)
  })
  await putUserToTag(selectedTag.value, ids).then(resp => {
    beforClose()
    getData() // 刷新数据
    getTags() // 标签信息更新
  })
}

getTags() // 标签
</script>

<style scoped></style>
